<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main" >
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label" style="line-height: 5px">当前余额：</label>
                <div class="layui-input-block">
                    <span style="padding: 20px" id="balance"></span><span>元</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">报单会员名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" lay-reqtext="会员名是必填项，岂能为空？"
                           placeholder="请输入" autocomplete="off" class="layui-input" id="username">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">收货地址：</label>
                <div class="layui-input-block">
                    <input type="text" name="userAddress" lay-verify="required" lay-reqtext="收货地址是必填项，岂能为空？"
                           placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮编：</label>
                <div class="layui-input-inline">
                    <input type="text" name="postCode" lay-verify="required" lay-reqtext="邮编是必填项，岂能为空？"
                           placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-inline">
                    <input type="radio" name="vip" value="黄金会员" title="黄金会员" checked="">
                </div>
                <div class="layui-input-inline">
                    <input type="radio" name="vip" value="铂金会员" title="铂金会员">
                </div>
                <div class="layui-input-inline">
                    <input type="radio" name="vip" value="钻石会员" title="钻石会员">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline" style="line-height: 20px">
                    <table>
                        <tr>
                            <td>消费金额：</td>
                            <td>4600</td>
                            <td>元</td>
                        </tr>
                        <tr>
                            <td> PV ：</td>
                            <td> 300</td>
                        </tr>
                        <tr>
                            <td>综合服务费：</td>
                            <td>690</td>
                            <td>元</td>
                        </tr>
                    </table>
                </div>
                <div class="layui-input-inline" style="line-height: 20px">
                    <table>
                        <tr>
                            <td>消费金额：</td>
                            <td>14600</td>
                            <td>元</td>
                        </tr>
                        <tr>
                            <td> PV ：</td>
                            <td> 900</td>
                        </tr>
                        <tr>
                            <td>综合服务费：</td>
                            <td>1500</td>
                            <td>元</td>
                        </tr>
                    </table>
                </div>
                <div class="layui-input-inline" style="line-height: 20px">
                    <table>
                        <tr>
                            <td>消费金额：</td>
                            <td>28800</td>
                            <td>元</td>
                        </tr>
                        <tr>
                            <td> PV ：</td>
                            <td> 1500</td>
                        </tr>
                        <tr>
                            <td>综合服务费：</td>
                            <td>2800</td>
                            <td>元</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
     var vip = layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.jquery;

        //监听提交
        form.on('submit(demo1)', function (data) {

            var vip = data.field.vip;
            var username = data.field.username;
            var userAddress = data.field.userAddress;
            var postCode = data.field.postCode;
            var roleId=0;
            var money=0;
            if(vip=="黄金会员"){
                roleId=3;
                money=690;
            }
            else if(vip=="铂金会员"){
                roleId=4;
                money=1500;
            }
            else if(vip=="钻石会员"){
                roleId=5;
                money=2800;
            }
            var balance = document.getElementById('balance').innerText;
            if(balance<money){
                alert("余额不足")
            }else {
                $.ajax({
                    url:"/vip/buyVip.do",
                    dataType:"json",
                    type:"post",
                    data:{
                        username:username,
                        userAddress:userAddress,
                        postCode:postCode,
                        roleId:roleId,
                        roleName:vip,
                        balance:money,
                    },
                    success:function (rec) {
                        if(rec.code===0){

                            form.render();
                        }
                    }
                })
                alert("购买成功,重新登录后生效!")

            }
        });

        $.ajax({
            url: "/bank/findBalance.do",
            type: "post",
            dataType: "json",
            success: function (r) {
                var data = r.data;
                $("#balance").html(data.balance)
            }
        });

        $.ajax({
            url: "/user/sessionUser.do",
            type: "post",
            dataType: "json",
            success: function (r) {
                var data = r.data;
                $("#username").val(data.username)
            }
        });

         form.render();
     });
</script>

</body>
</html>